<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
    <link rel="icon" href="../js/shop/assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../js/shop/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-cartPanelView.css" />
    <title>index-wzq.html商城首页</title>
</head>
<body>

<!--导航条-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">飞狐乐购</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <!-- <ul class="nav navbar-nav">
                <li><a href="/user/toQuery.jhtml">用户管理</a></li>
            </ul>-->
            <ul class="nav navbar-nav navbar-right" id="headDiv">



               <!-- 欢迎<font color="blue">${user.realName}</font>登录&nbsp;&nbsp;
                今天是第<font color="#00FF00">${user.loginCount}</font>次登录&nbsp;&nbsp;&nbsp;
                </br>
                上次登录时间为<font color="black">
                <f:formatDate value="${user.lastTime}" pattern="yyyy-MM-dd HH:mm"/></font>
                </br>
                <a href="<%=request.getContextPath()%>/user/logOut.jhtml"><font color="#a52a2a">注销</font></a>
                &nbsp;&nbsp;<a href="javaScript:0" onclick="updatePassword(${user_login.userId})"><font color="#d2691e">修改密码</font></a>
                <br/>-->

            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g NavList">
                    <div class="yui3-u Left all-sort">
                        <h4>全部商品分类</h4>
                    </div>
                    <div class="yui3-u Center navArea">
                        <ul class="nav">
                            <li class="f-item">服装城</li>
                            <li class="f-item">美妆馆</li>
                            <li class="f-item">品优超市</li>
                            <li class="f-item">全球购</li>
                            <li class="f-item">闪购</li>
                            <li class="f-item">团购</li>
                            <li class="f-item">有趣</li>
                        </ul>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!--列表-->
<div class="sort">
    <div class="py-container">
        <div class="yui3-g SortList ">
            <div class="yui3-u Left all-sort-list">
                <div class="all-sort-list2" id="cateDiv">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">商品列表</div>
                <div class="panel-body" id="productListDiv">


                </div>
            </div>
        </div>
    </div>
    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">热销品牌</div>
                <div class="panel-body" id="brandListDiv">

                </div>
            </div>
        </div>
    </div>


</div>


<!--商品列表展示模板-->
<div id="skuDiv" style="display: none">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="##image##" alt="..." style="width: 329.33px;height: 190.39px">
            <div class="caption">
                <h3 ><font color="red">##price##</font></h3>
                <p>##skuName##</p>
                <p><a href="#" class="btn btn-primary" role="button" onclick="buy('##id##')">购买</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>
    </div>
</div>


<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/shop/js/pages/index.js"></script>
<!--引入封装好的cookie-->
<script src="../js/jquery.cookie.min.js"></script>

<script src="../js/common.js"></script>

<script>

    $(function () {
        findCartCount();
        findMember();
        initSku();
        initCate();
        initCss();
    })

    let v_token=$.cookie("token");
    // alert("token打印")
    console.log(v_token);

    /**
     * 购买商品（添加购物车）
     */
    function buy(skuId){
        let param={};
        let v_count=1;
        param.count=v_count;
        param.skuId=skuId;
        $.ajax({
            type:"post",
            // url:server_url+"/cart/addItem",
            url:"http://localhost:9000/carts/api/carts/addItem",
            beforeSend:function (xhr){
                let v_token=$.cookie("token");
                xhr.setRequestHeader("x-auth",v_token);
            },
            data:param,
            success:function (result){
                // console.log(result);
                if(result.code==200){
                    findCartCount();
                    alert("添加到购物车了,请尽快下单吧！")
                }else if(result.code==5100||result.code==5101||result.code==5102||result.code==5103){
                    location.href="login.html";
                }
            }
        })
    }


    /**
     * 根据签名验证
     */
    function findMember(){
        $.ajax({
            type:"get",
            url:"http://localhost:9000/members/api/members/findMember",
            beforeSend:function (xhr){
                let v_token=$.cookie("token");
                xhr.setRequestHeader("x-auth",v_token);
            },
            success:function (res){
                if(res.code==200){
                    $("#headDiv").html('<li><a href="#">欢迎'+res.data.nickName+'</a><li><a href="updatePassword.html">修改密码</a></li><li><a href="#l" onclick="logout()">注销</a></li><li><a href="cart.html" id="cartCountDiv">购物车(0)</a></li>');
                    findCartCount();
                }else {
                    $("#headDiv").html(' <li><a href="login.html">请登录</a></li><li><a href="reg.html">注册</a></li>');
                }
            }
        })
    }

    /**
     * 查询购物车数量
     */
    function findCartCount(){
        $.ajax({
            type:"get",
            // url:server_url+"/cart/findCartCount",
            url:"http://localhost:9000/carts/api/carts/findCartCount",
            beforeSend:function (xhr){
                let v_token=$.cookie("token");
                xhr.setRequestHeader("x-auth",v_token);
            },
            success:function (res){
                if(res.code==200){
                    // alert(res.data)
                    var info=res.data?res.data:0;
                    $("#cartCountDiv").html("购物车("+info+")")
                }
            }
        })
    }


    /**
     * 注销
     */
    function logout(){
        $.ajax({
            type:"get",
            url:"http://localhost:9000/members/api/members/logout",
            beforeSend:function (xhr){
                let v_token=$.cookie("token");
                xhr.setRequestHeader("x-auth",v_token);
            },
            success:function (res){
                //删除cookic
                $.removeCookie("token");
                location.href="index.html";
            }
        })
    }



    function initSku(){
        $.ajax({
            type:"get",
            // url:server_url+"/skus",
            // url:"http://localhost:8181/api/skus",
            url:"http://localhost:9000/goods/api/skus/findRecommendNewProductList",
            success:function (result){
                if(result.code==200){
                    var  v_skuList=result.data;
                    // console.log(v_skuList);       <img src="..." width="50px"> ></td>      /upload/511c6a83-0bdb-485c-bfc9-9578db0d6170.gif
                    /*var v_skuHtml="";
                    for (let i = 0; i < v_skuList.length; i++) {
                        v_skuHtml+="<div class=\"col-sm-6 col-md-4\">\n" +
                            "    <div class=\"thumbnail\">\n" +
                            "      <img src='http://localhost:8083"+v_skuList[i].image+"' style='width: auto;height: 200px';>\n" +
                            "      <div class=\"caption\">\n" +
                            "        <h3 style='color: red'>￥"+v_skuList[i].price+"</h3>\n" +
                            "        <p>"+v_skuList[i].skuName+"</p>\n" +
                            "        <p><a href=\"#\" class=\"btn btn-primary\" role=\"button\">买</a> <a href=\"#\" class=\"btn btn-default\" role=\"button\">卖</a></p>\n" +
                            "      </div>\n" +
                            "    </div>\n" +
                            "  </div>"
                    }
                    $("#productListDiv").html(v_skuHtml);*/


                    // 方法待完善
                  for (let v_sku of v_skuList){
                        var v_html = $("#skuDiv").html();
                        var v_res = v_html.replace(/##image##/g,v_sku.image)
                            .replace(/##price##/g,"￥"+v_sku.price)
                            .replace(/##id##/g,v_sku.id)
                            .replace(/##skuName##/g,v_sku.skuName);
                        $("#productListDiv").append(v_res);
                    }



                }
            }
        })

    }




    function initCate(){
        $.ajax({
            type:"get",
            // url:server_url+"/cate/query",
            // url:"http://localhost:9000/cates/api/cates/query",
            url:"http://localhost:9000/cates/api/cates/query",
            beforeSend:function (xhr){
                let v_token=$.cookie("fh-token");
                xhr.setRequestHeader("x-auth",v_token);
            },
            async: false,//同步
            success:function (result){
                if(result.code==200){
                    var cateList = result.data;
                    /*      cateList格式
                    [
                    0: {id: 1, cateName: "家用电器", fatherId: 0, typeId: 18, typeName: null}
                    1: {id: 14, cateName: "手机", fatherId: 0, typeId: 18, typeName: null}
                    ]
                    */

                    for (let i = 0; i < cateList.length; i++) {
                        var cateHtml="";
                        if(cateList[i].fatherId==0){
                            cateHtml+="<div class=\"item\">\n" +
                                "\t<h3><a href=\"\">"+cateList[i].cateName+"</a></h3>\n" +
                                "\t<div class=\"item-list clearfix\">\n" +
                                "\t\t<div class=\"subitem\">"
                            var count=1;
                                for (let j = 0; j < cateList.length; j++) {
                                        if(cateList[i].id==cateList[j].fatherId){
                                            cateHtml+="<dl class=\"fore"+(count++)+"\">\n" +
                                                "\t\t\t\t<dt><a href=\"\">"+cateList[j].cateName+"</a></dt><dd>"
                                            for (let k = 0; k < cateList.length; k++) {
                                                if(cateList[j].id==cateList[k].fatherId){
                                                    cateHtml+="<em><a href=\"\">"+cateList[k].cateName+"</a></em>"
                                                }
                                            }
                                         cateHtml+="</dd>\n" +
                                             "\t\t\t</dl>"
                                        }
                                }

                        }
                        cateHtml+="</div>\n" +
                            "\t</div>\n" +
                            "</div>"
                        $("#cateDiv").append(cateHtml)
                    }

                }

            }
        })
    }



    function initCss() {
        $('.all-sort-list2 > .item').hover(function() {
            //父类分类列表容器的高度

            $(this).addClass('hover');
            $(this).children('.item-list').css('display', 'block');
        }, function() {
            $(this).removeClass('hover');
            $(this).children('.item-list').css('display', 'none');
        });

        $('.item > .item-list > .close').click(function() {
            $(this).parent().parent().removeClass('hover');
            $(this).parent().hide();
        });
    }
    
</script>
</body>
</html>